<template>
    <div>
        <page-header title="群聊" content="Role Chat" />
        <page-main>
            <JwChat-index
                v-model="inputMsg"
                :config="config"
                :tale-list="list"
                :show-right-box="true"
                scroll-type="scroll"
                :win-bar-config="winBarConfig"
                :quick-list="config.quickList"
                @clickTalk="talkEvent"
                @enter="bindEnter"
            >
                <!-- :toolConfig="tool" -->
                <JwChat-rightbox class="rightSlot" :config="rightConfig" @click="rightClick" />
                <template slot="tools">
                    <div style="width: 20%; text-align: right;" @click="toolEvent(12)">
                        <JwChat-icon type="icon-lishi" title="自定义" />
                    </div>
                </template>
            </JwChat-index>
        </page-main>
    </div>
</template>

<script>
const img = 'https://www.baidu.com/img/flexible/logo/pc/result.png'
const listData = [
    {
        'date': '2021/12/27 19:21:55',
        'text': {
            'text': '<i class=\'el-icon-document-checked\' style=\'font-size:2rem;\'/>',
            'subLink': {
                'text': 'a.txt',
                'prop': {
                    underline: false
                }
            }

        },
        'mine': false,
        'name': '留恋人间不羡仙',
        'img': 'https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg'
    },
    {
        'date': '',
        'text': {'text': '起床不'},
        'mine': false,
        'name': '留恋人间不羡仙',
        'img': 'https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg'
    },
    {
        'text': '2021/12/31 10:30:07',
        'type': 'tip'
    },
    {
        'date': '2021/12/30 12:15:30',
        'text': {'text': '<audio data-src=\'https://www.w3school.com.cn/i/horse.mp3\'/>'},
        'mine': false,
        'name': '只盼流星不盼雨',
        'img': 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg'
    },
    {
        'date': '2021/12/30 21:19:07',
        'text': {'text': '<img data-src=\'' + img + '\'/>'},
        'mine': false,
        'name': '只盼流星不盼雨',
        'img': 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg'
    },
    {
        'date': '2021/12/29 7:12:39',
        'text': {'text': '<video data-src=\'https://www.w3school.com.cn/i/movie.mp4\' controls=\'controls\' />'},
        'mine': false,
        'name': '留恋人间不羡仙',
        'img': 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg'
    },
    {
        'date': '2021/12/31 8:01:55',
        'text': {'text': '上课去了'},
        'mine': true,
        'name': 'ECUSTer',
        'img': 'https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg'
    },
    {
        'date': '2021/12/31 9:11:46',
        'text': {'text': '作业怎么做'},
        'mine': true,
        'name': 'ECUSTer',
        'img': 'https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=1.jpg'
    }
]

function getListArr(size) {
    const listSize = listData.length
    if (!size) {
        size = listSize
    }
    let result = []
    for (let i = 0; i < size; i++) {
        const item = listData[Math.random() * listSize >> 0]
        item.id = Math.random().toString(16).substr(-6)
        result.push(item)
    }
    return result
}

export default {
    components: {},
    data() {
        return {
            inputMsg: '',
            list: [],
            tool: {
                // show: ['file', 'history', 'img', ['文件1', '', '美图']],
                // showEmoji: false,
                callback: this.toolEvent
            },
            rightConfig: {
                listTip: '当前在线',
                notice: '【新公告】',
                list: [
                    {
                        name: '张三',
                        'img': 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg',
                        id: 1
                    },
                    {
                        id: 2,
                        name: '李四',
                        'img': 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg'
                    },
                    {
                        id: 3,
                        name: '王五',
                        'img': 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg'
                    },
                    {
                        id: 4,
                        name: '留恋人间不羡仙',
                        'img': 'https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg'
                    },
                    {
                        name: '只盼流星不盼雨',
                        'img': 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg'
                    }
                ]
            },
            quickConfig: {
                nav: ['快捷回复', '超级回复'],
                showAdd: true,
                maxlength: 200,
                showHeader: true,
                showDeleteBtn: true
            },
            talk: [
                '快捷回复1',
                '快捷回复2',
                '快捷回复3',
                '快捷回复4',
                '快捷回复5',
                '快捷回复6'
            ],
            config: {
                img: 'https://img1.baidu.com/it/u=2109725846,3376113789&fm=26&fmt=auto&gp=0.jpg',
                name: '计193',
                dept: '最简单、最便捷',
                callback: this.bindCover,
                historyConfig: {
                    show: true,
                    tip: '加载更多',
                    callback: this.bindLoadHistory
                },
                quickList: [
                    {text: '这里是jwchat，您想了解什么问题。', id: 3},
                    {text: 'jwchat是最好的聊天组件', id: 4},
                    {text: '谁将烟焚散，散了纵横的牵绊；听弦断，断那三千痴缠。', id: 5},
                    {text: '长夏逝去。山野间的初秋悄然涉足。', id: 6},
                    {text: '江南风骨，天水成碧，天教心愿与身违。', id: 7},
                    {text: '总在不经意的年生。回首彼岸。纵然发现光景绵长。', id: 8},
                    {text: '外面的烟花奋力的燃着，屋里的人激情的说着情话', id: 10},
                    {text: '假如你是云，我就是雨，一生相伴，风风雨雨；', id: 11},
                    {text: '即使泪水在眼中打转，我依旧可以笑的很美，这是你学不来的坚强。', id: 12},
                    {text: ' 因为不知来生来世会不会遇到你，所以今生今世我会加倍爱你。', id: 13}
                ]
            },
            winBarConfig: {
                active: 'win01',
                width: '160px',
                listHeight: '60px',
                list: [
                    {
                        id: 'win00',
                        img: 'https://img1.baidu.com/it/u=2109725846,3376113789&fm=26&fmt=auto&gp=0.jpg',
                        name: '计193',
                        dept: '班级团建',
                        readNum: 1
                    }, {
                        id: 'win01',
                        img: 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg',
                        name: '信息学院',
                        dept: '疫情摸排',
                        readNum: 12
                    }, {
                        id: 'win02',
                        img: 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg',
                        name: '全体学生',
                        dept: '666',
                        readNum: 12
                    },
                    {
                        id: 'win03',
                        img: 'https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg',
                        name: '全体男生',
                        dept: '就这样吧',
                        readNum: 0
                    },
                    {
                        id: 'win04',
                        img: 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg',
                        name: '华理交流平台',
                        dept: '官方客服'
                    }],
                callback: this.bindWinBar
            }
        }
    },
    mounted() {
        this.list = getListArr()
    },
    methods: {
        /**
         * @description: 点击加载更多的回调函数
         * @param {*}
         * @return {*}
         */
        bindLoadHistory() {
            const history = new Array(3).fill().map((i, j) => {
                return {
                    'date': '2021/12/31 10:19:00',
                    'text': {'text': j + new Date()},
                    'mine': false,
                    'name': 'JwChat',
                    'img': 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg'
                }
            })
            let list = history.concat(this.list)
            this.list = list
            console.log('加载历史', list, history)
        },
        talkEvent(play) {
            console.log(play)
            alert(1)
        },
        bindEnter(str) {
            const msg = this.inputMsg
            console.log(msg, str)
            if (!msg) return
            const msgObj = {
                'date': '2020/05/20 23:19:07',
                'text': {'text': msg},
                'mine': true,
                'name': 'JwChat',
                'img': 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg'
            }
            this.list.push(msgObj)
        },
        /**
         * @description:
         * @param {*} type 当前点击的按钮
         * @param {*} plyload 附加文件或者需要处理的数据
         * @return {*}
         */
        toolEvent(type, plyload) {
            console.log('tools', type, plyload)
        },
        bindCover(event) {
            console.log('header', event)
        },
        rightClick(type) {
            console.log('rigth', type)
        },
        bindTalk(play) {
            console.log('talk', play)
            const {key, value} = play
            if (key === 'navIndex')
                this.talk = [1, 1, 1, 1, 1, 1, 1, 1].reduce(p => {
                    p.push('随机修改颜色 #' + Math.random().toString(16).substr(-6))
                    return p
                }, [])
            if (key === 'select') {
                this.inputMsg = value
                this.bindEnter()
            }
            if (key === 'delIndex') {
                this.talk.splice(value, 1)
            }
        },
        bindWinBar(play = {}) {
            const {type, data = {}} = play
            console.log(play)
            if (type === 'winBar') {
                const {id, dept, name, img} = data
                this.config = {...this.config, id, dept, name, img}
                this.winBarConfig.active = id
                if (id === 'win00') {
                    this.list = getListArr()
                } else
                    this.list = getListArr(Math.random() * 4 >> 0)
            }
            if (type === 'winBtn') {
                const {target: {id} = {}} = data
                const {list} = this.winBarConfig
                this.winBarConfig.list = list.reduce((p, i) => {
                    if (id != i.id)
                        p.push(i)
                    return p
                }, [])
            }
        }
    }
}
</script>
<style scoped>
.rightSlot {
    width: 100%;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
}
</style>
<style>
.active {
    color: red;
}
.jwchat__body {
    height: 100vh;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
